<template>
  <header>这是头部</header>
  <div class="footer">
    <div class="nav">
      <list :msg="msg"></list>
    </div>
    <div class="center">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script>
import list from './components/listCom.vue'
export default {
  components: {
    list
  },
  data() {
    return {
      msg: [
        { id: 1, path: '/home', name: 'home' },
        { id: 2, path: '/child', name: 'child' },
        { id: 3, path: '/son', name: 'son' },
        { id: 4, path: '/serv', name: 'serv' }
      ]
    }
  }
}
</script>
<style scoped>
header {
  width: 100%;
  height: 160px;
  background: red;
}
.footer {
  flex: 1;
  display: flex;
  height: 100%;
}
.nav {
  width: 160px;
  height: 100%;
  background: pink;
  display: flex;
  flex-flow: column;
}
.center {
  flex: 1;
  background: yellow;
}
</style>
